<template>
  <div class="bgys">
    <!-- 公共头部 -->
    <head-main />
    <!-- 盒子 -->
    <div class="wpdesbox">
      <!-- 标题菜单 -->
      <div class="taskitembox">
        <div
          class="tool taskitem"
          v-for="item in taskdata"
          :key="item.id"
          @click="step = item.id"
        >
          <img
            src="@/images/tbtaska.png"
            alt=""
            class="normal"
            v-if="step != item.id"
          />
          <img
            src="@/images/tbtaskac.png"
            alt=""
            class="active"
            v-if="step != item.id"
          />
          <img
            src="@/images/tbtaskac.png"
            alt=""
            class=""
            v-if="step == item.id"
          />
          <span class="taskitemspan">{{ item.name }}</span>
        </div>
      </div>
      <!-- 物品展示+物品描述盒子 -->
      <div class="wpdbox" v-if="step == 1" :key="step">
        <div class="wpmxbox" v-if="step == 1">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>
        <div class="wpmxdex">
          <img src="@/images/wpmxdeximg.png" alt="" class="wpmxdeximg" />
          <div class="wpwz">
            <!-- 工作原理 -->
            <img src="@/images/gzyl.png" alt="" class="gzyl" />
            <!-- 工作原理内容 -->
            <div class="wpitemdes">
              低速离心机通过旋转离心转子，产生离心力，将混合物中的组分分离出来。离心力是一种惯性力，它的大小与转子的旋转速度和半径有关。当混合物置于离心转子中，转子开始旋转时，离心力将作用于混合物中的各个组分，使其沉降或浮起，从而实现分离。
            </div>
            <!-- 用途 -->
            <img src="@/images/yongt.png" alt="" class="itemyt" />
            <!-- 用途 -->
            <div class="wpitemdes">
              低速离心机通过旋转离心转子，产生离心力，将混合物中的组分分低速离心机在生物科学、化学分析、药物研发等领域中广泛应用。在生物科学中，低速离心机常用于分离血液中的细胞、分离蛋白质等。在化学分析中，低速离心机可用于分离和纯化化合物。在药物研发中，低速离心机可用于制备和分离药物。
            </div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="wpdbox" v-if="step == 2" :key="step">
        <div class="wpmxbox" v-if="step == 2">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>

        <div class="wpmxdex">
          <div class="beautifulScroll wpmxdexs">
            <!-- <img src="@/images/wpmxdeximg.png" alt="" class="wpmxdeximg" /> -->
            <div class="wpwz">
              <div class="wpitemdes">
                真空采血管脱盖机专门用于打开真空采血管顶盖的设备。它采用先进的机械和自动化技术，能够快速、准确地完成采血管顶盖的打开操作。这种机器通常由以下几个部分组成：
              </div>

              <img
                src="@/images/jxbf.png"
                alt=""
                class="gzyl"
                style="visibility: hidden"
              />
              <!-- 工作原理 -->
              <img src="@/images/jxbf.png" alt="" class="gzyl" />
              <!-- 工作原理内容 -->
              <div class="wpitemdes">
                包括传动系统、夹具和真空头盖。传动系统负责将机器与电源连接，驱动机器运转；夹具负责将真空采血管固定在适当的位置；真空头盖则与机器相连，通过真空吸力将真空采血管的顶盖打开。
              </div>
              <!-- 用途 -->
              <img src="@/images/kzxt.png" alt="" class="itemyt" />
              <!-- 用途 -->
              <div class="wpitemdes">
                控制系统是机器的核心部分，负责控制机器的各项操作，包括真空头盖的吸合、夹具的松开和闭紧、传动系统的驱动等。此外，控制系统还需要对机器的运行状态进行实时监测，确保机器的正常运转。
              </div>
              <!-- 用途 -->
              <img src="@/images/zkb.png" alt="" class="itemyt" />
              <!-- 用途 -->
              <div class="wpitemdes">
                真空泵负责提供真空吸力，通过真空头盖将真空采血管的顶盖吸开。真空泵的功率和性能直接影响着顶盖打开的速度和准确性。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wpdbox" v-if="step == 3" :key="step">
        <div class="wpmxbox" v-if="step == 3">
          <show-mxs :mxmtnumber="mxmtnumber" />
        </div>
        <div class="wpmxdex">
          <img src="@/images/wpmxdeximg.png" alt="" class="wpmxdeximg" />
          <div class="wpwz">
            <!-- 工作原理 -->
            <img src="@/images/gzyl.png" alt="" class="gzyl" />
            <!-- 工作原理内容 -->
            <div class="wpitemdes">
              全自动生化分析仪是根据光电比色原理来测量体液中某种特定化学成分的仪器，将原始手工操作过程中的取样、混匀、温浴（37℃）检测、结果计算、判断、显示和打印结果及清洗等步骤全部或者部分自动运行。
            </div>
            <!-- 用途 -->
            <img src="@/images/yongt.png" alt="" class="itemyt" />
            <!-- 用途 -->
            <div class="wpitemdes">
              主要用于检测、分析生命化学物质的仪器，给临床上对疾病的诊断、治疗和预后及健康状态提供信息依据。
            </div>
          </div>
        </div>
      </div>
      <!-- 开始实验 -->
      <div class="tool startbox" @click="startfn">
        <img src="@/images/start.png" alt="" class="normal" />
        <img src="@/images/startac.png" alt="" class="active" />
      </div>
    </div>
  </div>
</template>

<script>
import HeadMain from '@/components/headMain.vue'
import ShowMxs from '@/components/showMxs.vue'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { HeadMain, ShowMxs },
  data() {
    //这里存放数据
    return {
      step: 1,
      mxmtnumber: 'LiXinJi.glb',
      taskdata: [
        {
          id: 1,
          name: '低速离心机'
        },
        {
          id: 2,
          name: '真空采血管脱盖机'
        },
        {
          id: 3,
          name: '全自动生化分析仪'
        }
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    step: {
      handler(i) {
        if (i == 1) {
          this.mxmtnumber = 'LiXinJi.glb'
        }
        if (i == 2) {
          this.mxmtnumber = 'TuoGaiJi.glb'
        }
        if (i == 3) {
          this.mxmtnumber = 'FenXiYi.glb'
        }
      },
      immediate: true,
      deep: true
    }
  },
  //方法集合
  methods: {
    startfn() {
      this.$router.push({
        name: 'index'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.bgys {
  background-color: #02284b;
  width: 100%;
  height: 100%;
}
</style>
